import './globals.css'
import type { Metadata } from 'next'
import { ReactNode } from 'react'
import ThemeToggle from '@/components/ThemeToggle'
import Providers from '@/components/Providers'

export const metadata: Metadata = {
  title: 'Learning Machine Analysis',
  description: 'Returns classification analysis'
}

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="zh-CN" suppressHydrationWarning>
      <body className="min-h-screen bg-white text-gray-900 dark:bg-neutral-900 dark:text-gray-100">
        <Providers>
          <header className="border-b border-gray-200 dark:border-neutral-700 p-4 flex items-center justify-between">
            <div className="font-semibold">学习机退货分析</div>
            <nav className="flex items-center gap-3">
              <a
                href="http://localhost:3000/"
                className="px-3 py-1 rounded border border-blue-500 text-blue-600 hover:bg-blue-50"
              >查看ANR数据分析</a>
              <a
                href="http://localhost:3001/analysis"
                className="px-3 py-1 rounded border border-blue-500 text-blue-600 hover:bg-blue-50"
              >查看售后退货数据</a>
            </nav>
            <ThemeToggle />
          </header>
          <main className="p-6">{children}</main>
        </Providers>
      </body>
    </html>
  )
}
